import React, { useCallback, useEffect, useState } from "react";
import { Form, Button, Checkbox, Space, DatePicker, message, Tooltip, Image } from "antd";
import BtnGroup from "@/views/components/BtnGroup";
import RangeDisablePicker from "@/views/components/RangeDisablePicker";
import DetailButton from "@/views/components/ViewLogButton/DetailButton";
import SelectShopInputModal from "@/views/components/SelectShopInputModal";
import { CommonText, StatusText } from "@/pages/OrderModule/common/components/CommonText";
import { ShoppingFilled, TagFilled } from "@ant-design/icons";
import ShopIcons from "@/pages/OrderModule/common/bizcomponents/SelectShopModal/ShopIcons";

import { STORE_GOODS_ACTION_TYPE } from "@/views/utils/constant";
import ActionSelect from "@/views/components/ActionSelect";
import { Select, Input, BatchSuffixInput } from "@/views/components/PrefixPlaceholder";

export default ({ actionType }) => {
	const [tabValue, setTabValue] = useState("sku");
	const [record, setRecord] = useState(null);
	const [detailVisible, setDetailVisible] = useState(false);
	// const [data, setData] = useState([]);
	const [typehouse, setTypehouse] = useState(null);
	const [actionhouse, setActionhouse] = useState(null);
	useEffect(() => {}, [actionType]);
	const defaultColumns = [
		{
			tabs: ["sku"],
			hidden: true,
			search: {
				span: 3,
				order: 1,
				// 按款式/按SKU：点击后，所有当前页面的查询条件、列表数据切换至SPU/SKU维度展示。
				content: () => (
					<BtnGroup
						value="sku"
						onChange={value => {
							setTabValue(value);
						}}
						options={[
							{
								label: "按款式",
								value: "spu",
								icon: <ShoppingFilled className="mr4" />
							},
							{
								label: "SKU",
								value: "sku",
								icon: <TagFilled className="mr4" />
							}
						]}
					/>
				)
			}
		},
		{
			tabs: ["spu"],
			hidden: true,
			search: {
				order: 1,
				span: 3,
				// 按款式/按SKU：点击后，所有当前页面的查询条件、列表数据切换至SPU/SKU维度展示。
				content: () => (
					<BtnGroup
						value="spu"
						onChange={value => {
							setTabValue(value);
						}}
						options={[
							{
								label: "按款式",
								value: "spu",
								icon: <ShoppingFilled className="mr4" />
							},
							{
								label: "SKU",
								value: "sku",
								icon: <TagFilled className="mr4" />
							}
						]}
					/>
				)
			}
		},
		{
			tabs: ["sku"],
			name: "链接信息",
			code: "ecType",
			width: 250,
			render: (text, record, i) => (
				<>
					<div className="flex">
						<div>
							<Image style={{ width: 50, height: 50 }} preview src={record.skuImage} />
						</div>
						<div>
							<div className="flex mb10 ">
								<div>{record.ecStoreLogo}</div>
								<CommonText icon={text ? <ShopIcons type={record.ecType} /> : null} as="s1" />
								<div>{record.ecStoreName}</div>
							</div>
							<div
								style={{
									color: "rgba(0, 104, 255, 1)",
									overflow: "hidden",
									whiteSpace: "nowrap",
									textOverflow: "ellipsis",
									width: "180px"
								}}
								className="mb10"
							>
								{record.skuName ? record.skuName : record.spuName}
							</div>
							<div>款式编码:{record.spuCode}</div>
						</div>
					</div>
				</>
			),
			search: {
				order: 6,
				code: "spuCodes",
				span: 3,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						modalProps={{ title: "请输入款式编码" }}
						placeholder="多个款式编码，以逗号隔开"
						message="多个款式编码，以逗号分隔或每行一个款式编码"
					/>
				)
			}
		},
		{
			tabs: ["spu"],
			name: "链接信息",
			code: "ecType",
			width: 250,
			render: (text, record, i) => (
				<>
					<div className="flex">
						<div>
							<Image style={{ width: 50, height: 50 }} preview src={record.spuImage} />
						</div>
						<div>
							<div className="flex mb10 ">
								<div>{record.ecStoreLogo}</div>
								<CommonText icon={text ? <ShopIcons type={record.ecType} /> : null} as="s1" />
								<div>{record.ecStoreName}</div>
							</div>
							<div
								style={{
									color: "rgba(0, 104, 255, 1)",
									overflow: "hidden",
									whiteSpace: "nowrap",
									textOverflow: "ellipsis",
									width: "180px"
								}}
								className="mb10"
							>
								{record.skuName ? record.skuName : record.spuName}
							</div>
							<div>款式编码:{record.spuCode}</div>
						</div>
					</div>
				</>
			),
			search: {
				order: 6,
				code: "spuCodes",
				span: 3,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						modalProps={{ title: "请输入款式编码" }}
						placeholder="多个款式编码，以逗号隔开"
						message="多个款式编码，以逗号分隔或每行一个款式编码"
					/>
				)
			}
		},
		{
			tabs: ["spu"],
			name: "平台商品id",
			code: "ecSpuId",
			search: {
				order: 13,
				span: 3,
				code: "ecSpuId",
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						modalProps={{ title: "请输入平台商品id" }}
						placeholder="多个平台商品id，以逗号隔开"
						message="多个平台商品id，以逗号分隔或每行一个平台商品id"
					/>
				)
			}
		},
		{
			tabs: ["sku"],
			name: "商品编码",
			code: "skuCode",
			search: {
				order: 5,
				span: 3,
				code: "skuCodes",
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						modalProps={{ title: "请输入商品编码" }}
						placeholder="多个商品编码，以逗号隔开"
						message="多个商品编码，以逗号分隔或每行一个商品编码"
					/>
				)
			}
		},
		{
			tabs: ["sku"],
			name: "平台skuid",
			code: "ecSkuId",
			search: {
				order: 13,
				span: 3,
				code: "ecSkuId",
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						modalProps={{ title: "请输入skuid" }}
						placeholder="多个skuid，以逗号隔开"
						message="多个skuid，以逗号分隔或每行一个skuid"
					/>
				)
			}
		},
		{
			tabs: ["spu"],
			hidden: true, // 款式列表 没有 商品编码, 只显示在搜索栏
			name: "商品编码",
			code: "skuCode",
			search: {
				order: 5,
				span: 3,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						modalProps={{ title: "请输入商品编码" }}
						placeholder="多个商品编码，以逗号隔开"
						message="多个商品编码，以逗号分隔或每行一个商品编码"
					/>
				)
			}
		},
		{
			tabs: ["sku", "spu"],
			name: "状态",
			code: "status",
			with: 80,
			render: (_, record) => (
				<div>
					<StatusText
						as="s1"
						text={record.status == "success" ? "成功" : "失败"}
						type={record.status == "success" ? "success" : "error"}
					/>
				</div>
			),
			// render: v => <span>{v == "success" ? "成功" : "失败"}</span>,
			search: {
				order: 3,
				span: 3,
				code: "ecStoreIds",
				content: form => <SelectShopInputModal multiple={true} placeholder="选择平台/店铺" />
			}
		},
		{
			tabs: ["sku", "spu"],
			name: "失败原因",
			code: "failRemark",
			width: 100,

			render: v => <span>{v ? v : "-"}</span>
		},
		{
			tabs: ["sku", "spu"],
			name: "操作类型",
			code: "type",
			width: 130,
			render: value => (
				<span>
					{STORE_GOODS_ACTION_TYPE.map(item => {
						if (item.value == value) {
							return <span>{item.label}</span>;
						}
					})}
				</span>
			),
			search: {
				order: 12,
				span: 3,
				content: () => (
					<Select
						placeholder="操作类型"
						value={typehouse}
						allowClear
						defaultValue={actionType}
						onChange={handleTypeChage}
						options={STORE_GOODS_ACTION_TYPE}
					/>
				)
			}
		},
		{
			tabs: ["sku", "spu"],
			name: "操作人",
			with: 80,
			code: "operatorName",
			search: {
				order: 2,
				span: 3,
				code: "operatorId",
				content: () => {
					return <ActionSelect value={actionhouse} onChange={handleActionChange} />;
				}
			}
		},

		{
			tabs: ["sku", "spu"],
			name: "操作时间",
			code: "operTime",
			width: 160,
			search: {
				order: 1,
				span: 6,
				keys: ["startTime", "endTime"],
				content: () => <RangeDisablePicker showTime diff="6 months" className="width-full" />
			}
		},
		{
			tabs: ["sku", "spu"],
			lock: true,
			code: "action",
			width: tabValue == "sku" ? 80 : 80,
			name: "操作",
			align: "center",
			render(_, record) {
				return (
					<>
						<DetailButton record={record} isSkuType={isSkuType}>
							<Button disabled={!record.operRemark} onClick={e => onClick(record)} type="link" className="mr8">
								查看详情
							</Button>
						</DetailButton>
					</>
				);
			}
		}
	];
	const onClick = e => {
		setRecord(e);
		setDetailVisible(true);
	};
	const handleActionChange = value => {
		setActionhouse(value);
	};
	const handleTypeChage = value => {
		setTypehouse(value);
	};

	const getColumns = useCallback(
		t => {
			return defaultColumns.filter(e => e.tabs.includes(t));
		},
		[tabValue]
	);
	const [columns, setColumns] = useState(getColumns("sku"));
	const [isSkuType, setIsSkuType] = useState(false);

	useEffect(() => {
		setIsSkuType(tabValue === "sku");
		setColumns(getColumns(tabValue));
	}, [tabValue]);
	return { isSkuType, tabValue, setTabValue, columns, defaultColumns, setColumns, record, detailVisible, actionhouse };
};
